import React, { useMemo, memo, CSSProperties } from 'react';
import { useDrag } from 'react-dnd';
import styles from './index.less';

const TargetBox = memo((props: any) => {
  const { item, drop } = props;

  const [{ isDragging }, drag] = useDrag({
    item: {
      type: 'component',
      component: item.type,
      category: item.category,
    },
    end: (item, monitor) => {
      drop(item);
    },
    collect: monitor => {
      return {
        isDragging: monitor.isDragging(),
      };
    },
  });

  const containerStyle: CSSProperties = useMemo(
    () => ({
      opacity: isDragging ? 0.4 : 1,
    }),
    [isDragging],
  );
  return (
    <div className={styles.wrap}>
      <div className={styles.module} style={{ ...containerStyle }} ref={drag}>
        <div
          style={{
            height: '110px',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            flexDirection: 'column',
            overflow: 'hidden',
          }}
        >
          <img src={item.image} alt={item.title} />
        </div>
        <div
          style={{
            height: '30px',
            lineHeight: '30px',
            textAlign: 'center',
            backgroundColor: 'rgba(245, 245, 245, 1)',
            color: 'rgba(118, 118, 118, 1)',
          }}
        >
          {item.title}
        </div>
      </div>
    </div>
  );
});

export default TargetBox;
